<template>
    <div class="execlComponent">
        <div id="luckysheet" class="luckysheet-content" ></div>
    </div>
</template>

<script>
    import luckySheetUtil from "./luckySheetUtil.js"
    import luckyExcel from 'luckyexcel'
    import Vue from 'vue'
    export default {
        name: "ExeclComponent",
        props: ['execlSheet'],
        data() {
            return {

                luckysheetOption: {
                    container: "luckysheet", // 设定DOM容器的id
                    title: "Luckysheet Demo", // 设定表格名称
                    lang: "zh", // 设定表格语言
                    data: [
                        {
                            name: "", //工作表名称
                            color: "#eee333", //工作表(工作表名称底部边框线)颜色
                            index: 0, //工作表索引(新增一个工作表时该值是一个随机字符串)
                            status: 1, //激活状态
                            order: 0, //工作表的下标
                            hide: 0, //是否隐藏
                            row: 1, //行数
                            column: 10, //列数
                            defaultRowHeight: 50, //自定义行高,单位px
                            defaultColWidth: 150, //自定义列宽,单位px
                            celldata: [], //初始化使用的单元格数据,r代表行，c代表列，v代表该单元格的值，最后展示的是value1，value2
                            config: {
                                merge: {}, //合并单元格
                                rowlen: {}, //表格行高
                                columnlen: {}, //表格列宽
                                rowhidden: {}, //隐藏行
                                colhidden: {}, //隐藏列
                                borderInfo: {}, //边框
                                authority: {}, //工作表保护
                            },
                            scrollLeft: 0, //左右滚动条位置
                            scrollTop: 0, //上下滚动条位置
                            luckysheet_select_save: [], //选中的区域
                            calcChain: [], //公式链
                            isPivotTable: false, //是否数据透视表
                            pivotTable: {}, //数据透视表设置
                            filter_select: {}, //筛选范围
                            filter: null, //筛选配置
                            luckysheet_alternateformat_save: [], //交替颜色
                            luckysheet_alternateformat_save_modelCustom: [], //自定义交替颜色
                            luckysheet_conditionformat_save: {}, //条件格式
                            frozen: {}, //冻结行列配置
                            chart: [], //图表配置
                            zoomRatio: 1, // 缩放比例
                            image: [], //图片
                            showGridLines: 1, //是否显示网格线
                            dataVerification: {}, //数据验证配置
                        },
                    ],
                    showtoolbar: true,
                    showtoolbarConfig: {
                        textColor: true, // '文本颜色'
                        fillColor: true, // '单元格颜色'
                        border: true, // '边框'
                        mergeCell: true, // '合并单元格'
                        horizontalAlignMode: true, // '水平对齐方式'
                        verticalAlignMode: true, // '垂直对齐方式'
                        undoRedo: false, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏
                        paintFormat: true, //格式刷
                        currencyFormat: false, //货币格式
                        percentageFormat: false, //百分比格式
                        numberDecrease: false, // '减少小数位数'
                        numberIncrease: false, // '增加小数位数
                        moreFormats: true, // '更多格式'
                        font: true, // '字体'
                        fontSize: true, // '字号大小'
                        bold: true, // '粗体 (Ctrl+B)'
                        italic: true, // '斜体 (Ctrl+I)'
                        strikethrough: false, // '删除线 (Alt+Shift+5)'
                        underline: true, // '下划线 (Alt+Shift+6)'
                        textWrapMode: true, // '换行方式'
                        textRotateMode: false, // '文本旋转方式'
                        image: false, // '插入图片'
                        link: false, // '插入链接'
                        chart: false, // '图表'（图标隐藏，但是如果配置了chart插件，右击仍然可以新建图表）
                        postil: false, //'批注'
                        pivotTable: false, //'数据透视表'
                        function: false, // '公式'
                        frozenMode: false, // '冻结方式'
                        sortAndFilter: false, // '排序和筛选'
                        conditionalFormat: false, // '条件格式'
                        dataVerification: true, // '数据验证'
                        splitColumn: false, // '分列'
                        screenshot: false, // '截图'
                        findAndReplace: false, // '查找替换'
                        protection: false, // '工作表保护'
                        print: true, // '打印'
                    },
                    showsheetbar: false, //是否显示底部sheet页按钮
                    showsheetbarConfig: {
                        add: false, //新增sheet
                        menu: false, //sheet管理菜单
                        sheet: false, //sheet页显示
                    },
                    cellRightClickConfig:{

                    },
                    sheetRightClickConfig:{

                    },
                    showinfobar: false, //是否显示顶部信息栏
                    showstatisticBar: false, //是否显示底部计数栏
                    showstatisticBarConfig: {
                        count: false, // 计数栏
                        view: false, // 打印视图
                        zoom: false, // 缩放
                    },
                    sheetFormulaBar: false, //是否显示公式栏
                    allowCopy: true, //是否允许拷贝
                    enableAddRow: false, //允许添加行
                    enableAddBackTop:false, //允许回到顶部
                }
            };
        },
        mounted() {
            this.$nextTick(() => {
                this.initLuckysheet(this.execlSheet);
            });
        },
        methods: {
            ...luckySheetUtil,
            refresh(){
                this.$nextTick(() => {
                    this.initLuckysheet(this.execlSheet);
                });
            },
            initLuckysheet(data) {
                var _this = this;//注意这里要重新指定下this对象。

                // In some cases, you need to use $nextTick
               // this.$nextTick(() => {
                    $(function () {
                        if (data != null && data != undefined && data != "{}") {
                            let importExeclInfo = JSON.parse(data);
                            importExeclInfo[0].defaultRowHeight = 30;
                            for(let x=0;x<importExeclInfo[0].data.length;x++){
                              for(let y = 0;y < importExeclInfo[0].data[x].length;y++) {
                                if(importExeclInfo[0].data[x][y] != null) {
                                  importExeclInfo[0].data[x][y].vt = 1;

                                }
                              }
                            }
                            console.log(importExeclInfo[0])
                            _this.luckysheetOption.data = importExeclInfo;
                        }
                        luckysheet.create(_this.luckysheetOption);
                    });

               // });
            },
            /**接口数据回显 */
            dataRendSheet(excelHeader, excelData) {
                //回显表格表头，第一行
                if (excelHeader.length > 0) {
                    excelHeader.forEach((item1, index1) => {
                        luckysheet.setCellValue(0, index1, item1);
                        //普通回显数据
                        if (JSON.stringify(excelData) != "{}") {
                            excelData[item1].forEach((item2, index2) => {
                                var row = index2 + 1;
                                luckysheet.setCellValue(row, index1, item2);
                            });
                        }
                    });
                }
            },
            getSheetData(){
                return JSON.stringify(luckysheet.getAllSheets());
            },
            importExecl(file,execlSheetHead){
                var _this = this;
                luckysheet.destroy(); // 先销毁当前容器
                luckyExcel.transformExcelToLucky(file, function(
                    exportJson,
                    luckysheetfile
                ) {
                    if (exportJson.sheets == null || exportJson.sheets.length == 0) {
                        _this.$Message.warning("读取excel文件内容失败，目前不支持xls文件!");
                        return;
                    }
                    let importExeclInfo = exportJson.sheets;
                    let execlInfo = JSON.parse(execlSheetHead);
                    for(let x=0;x<execlInfo[0].celldata.length;x++){
                      let v = "";
                      let cell =  importExeclInfo[0].celldata[x].v;
                      if(cell.ct&&cell.ct.t=='inlineStr'){
                        var s=cell.ct.s;
                        s.forEach(function(val,num){
                          v+=val.v;
                        })
                      }else{
                        v=cell.v;
                      }
                      let v1 = "";
                      let cell1 =  execlInfo[0].celldata[x].v;
                      if(cell1.ct&&cell1.ct.t=='inlineStr'){
                        var s=cell1.ct.s;
                        s.forEach(function(val,num){
                          v1+=val.v;
                        })
                      }else{
                        v1=cell1.v;
                      }
                      if(typeof v == "string")
                        v = v.replace(/\r|\n/ig,"");
                      if(typeof v1 == "string")
                        v1 = v1.replace(/\r|\n/ig,"");
                      if(execlInfo[0].celldata[x].v.it == 1)
                        break;
                      if(x >= importExeclInfo[0].celldata.length ||
                        ( execlInfo[0].celldata[x].c != importExeclInfo[0].celldata[x].c
                        ||  execlInfo[0].celldata[x].r != importExeclInfo[0].celldata[x].r
                        ||  v1 != v )){
                        _this.luckysheetOption.data = execlInfo;
                        luckysheet.create(_this.luckysheetOption);
                        _this.$Message.warning("该execl文件与主题不符!");
                        return ;
                      }
                    }
                    for(let x=0;x<importExeclInfo[0].celldata.length;x++){
                      importExeclInfo[0].celldata[x].v.vt = 1;
                    }
                    _this.luckysheetOption.data = importExeclInfo;
                    luckysheet.create(_this.luckysheetOption);
                })
            }
        },
    };
</script>
<style >


    .execlComponent{
        z-index: 9004;
        width: 100%;
        height: 100%;
    }

    .luckysheet-content {
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
    }

    .luckysheet-cols-menu{
        z-index: 9004 !important;
    }
    .luckysheet-input-box{
        z-index: 3000 !important;
    }
    .luckysheet-wa-editor{
        z-index: 2005 !important;
    }
    .luckysheet-modal-dialog-slider{
        z-index: 2005 !important;
    }

    .luckysheet-wa-editor {
        height: 32px;
        background: #fafafc;
        position: relative;
        padding: 0;
        border-bottom: 1px solid #d4d4d4;
        white-space: nowrap;
        transition: all .2s;
    }

    .luckysheet-sheet-area div.luckysheet-sheets-item {
        height:100%;
    }


</style>